<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>欢迎使用专家特贴系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content" id="index">

    <div class="col-sm-12">

        <div class="row" style="padding-left:20px;margin-bottom: 20px;">
            <h2 v-text="welcomeText" style="font-weight: bold"></h2>
        </div>

        <div class="row">
            <div class="ant-col ant-col-12" v-if="xiaoxiCount!=0" style="padding-left: 5px; padding-right: 5px;">
                <div class="card-container" >
                    <div class="ant-card ant-card-bordered ant-card-small" >
                        <div class="ant-card-head">
                            <div class="ant-card-head-wrapper">
                                <div class="ant-card-head-title">
                                    <div class="title"><span role="img" aria-label="sound"
                                                             class="anticon anticon-sound"
                                                             style="font-size: 18px;"><svg
                                            focusable="false" class="" data-icon="sound" width="1em" height="1em"
                                            fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path
                                            d="M275.4 424H146v176h129.4l18 11.7L586 803V221L293.3 412.3z"
                                            fill="#e6f7ff"></path><path
                                            d="M892.1 737.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM934 476H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344zM625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582z"
                                            fill="#1890ff"></path></svg></span><span class="smart-margin-left10"
                                    >未读消息</span>
                                    </div>
                                </div>
                                <div @click="toXiaoxi" class="ant-card-extra"><a >更多</a></div>
                            </div></div>
                        <div class="ant-card-body">
                            <div class="ant-spin-nested-loading" >
                                <div class="ant-spin-container">
                                    <div class="content-wrapper">
                                        <ul>
                                            <li @click="toXiaoxi" v-for="xiaoxi in xiaoxiList" class="read" ><a class="content"
                                            ><span
                                                    class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
                                            ><span
                                                    class="ant-badge-status-dot ant-badge-status-error"></span><span
                                                    class="ant-badge-status-text"></span></span> {{xiaoxi.biaoti}}
                                            </a><span class="time" >{{xiaoxi.fasongshijian}}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div></div>
                </div>
            </div>

            <div class="col-sm-4" style="margin-top:20px;padding-left: 5px; padding-right: 5px;" v-if="daihechaCount!=0">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="height: 60px;">
                        <h5 v-text="'待核查专家（'+daihechaCount+')'" style="line-height: 30px;"></h5>
                        <div class="ibox-tools">
                            <button class="btn btn-success btn-md" @click="toHecha()">处理待核查</button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table id="bootstrap-table" class="table table-hover no-margins" style="text-align: center">
                            <thead>
                            <tr>
                                <th style="text-align: center">专家姓名</th>
                                <th style="text-align: center">工作单位</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="daihecha in daihechaList">
                                <td v-text="daihecha.xingming"></td>
                                <td v-text="daihecha.gongzuodanwei"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<th:block th:include="include :: footer"/>
<script>
    var vm_index = new Vue({
        el: "#index",
        data: {
            deptid: $("#deptid").val(),		// deptid
            deptname: $("#deptname").val(),		// deptname
            userid: $("#userid").val(),
            username: $("#username").val(),
            roleid: $("#roleid").val(),

            welcomeText: '',

            xiaoxiList: [],
            xiaoxiCount: '',
            daihechaList: [],
            daihechaCount: '',
            xuzhi: {},

        },
        created: function () {
            var _this = this;

            _this.bindWelcome();
            _this.bindXiaoxiList();
            _this.bindDaihechaList();
            //_this.bindXuzhi();

        },
        methods: {

            bindWelcome: function () {
                var _this = this;

                var juese = '普通管理员';

                if (_this.roleid == '101' || _this.roleid == '102') {
                    juese = '超级管理员';
                }

                _this.welcomeText = _this.username + '同志，您好！您是' + _this.deptname + '的' + juese + '，欢迎使用本系统！';

            },

            //
            bindXiaoxiList: function () {
                var _this = this;

                var index_layer = layer.open({type: 3});
                $.post('/system/xiaoxi/inBoxWeidulist', {
                    userid: _this.userid,
                    rdm: Math.random()
                }, function (ppData) {
                    layer.close(index_layer);
                    if (ppData.code == 0) {
                        _this.xiaoxiList = ppData.rows;
                        _this.xiaoxiCount = ppData.total;
                    }
                }, "json");
            },

            bindDaihechaList: function () {
                var _this = this;

                var index_layer = layer.open({type: 3});
                $.post('/system/renkouhecha/list', {
                    jigoudaima: _this.deptid,
                    shifouchuli: '0',
                    rdm: Math.random()
                }, function (ppData) {
                    layer.close(index_layer);
                    if (ppData.code == 0) {
                        _this.daihechaList = ppData.rows;
                        _this.daihechaCount = ppData.total;
                    }
                }, "json");
            },


            bindXuzhi: function () {
                var _this = this;

                var index_layer = layer.open({type: 3});
                $.post('/system/gonggao/findNewestByLeixing', {
                    gonggaoleixing: '3',
                    rdm: Math.random()
                }, function (ppData) {
                    layer.close(index_layer);
                    if (ppData.result == 1) {
                        _this.xuzhi = ppData.resultContent;
                    }
                }, "json");
            },

            toXiaoxi: function () {
                $.modal.openTab("收件箱", '/system/xiaoxi/inBox', false);
            },

            toHecha: function () {
                $.modal.openTab("专家变动状态申报", '/system/zhuanjia/biandongshenbao', false);
            }
        },
    })
</script>
<style>
    .card-container .title:before {
        content: "";
        position: absolute;
        top: 3px;
        left: 0;
        width: 3px;
        height: 30px;
        background-color: #1890ff;
    }
    .smart-margin-left10 {
        margin-left: 10px;
    }
    .ant-layout, .ant-layout * {
        box-sizing: border-box;
    }
    .ant-col-12 {
        display: block;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .ant-col {
        position: relative;
        min-height: 1px;
    }
    .card-container {
        background-color: #fff;
        height: 100%;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: large;
        outline: none!important;
    }
    *, *:before, *:after {
        box-sizing: border-box;
    }
    .ant-card-bordered {
        border: 1px solid #f0f0f0;
    }
    .ant-card {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: #000000d9;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum";
        position: relative;
        background: #fff;
        border-radius: 2px;
    }
    .ant-card-small>.ant-card-head {
        min-height: 36px;
        padding: 0 12px;
        font-size: 14px;
    }

    .ant-card-head {
        min-height: 48px;
        margin-bottom: -1px;
        padding: 0 24px;
        color: #000000d9;
        font-weight: 500;
        font-size: 16px;
        background: transparent;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 2px 2px 0 0;
    }
    .ant-card-head:before {
        display: table;
        content: "";
    }
    *, *:before, *:after {
        box-sizing: border-box;
    }

    .ant-card-head-wrapper {
        display: flex;
        align-items: center;
    }
    .ant-card-small>.ant-card-head>.ant-card-head-wrapper>.ant-card-head-title {
        padding: 8px 0;
    }

    .ant-card-head-title {
        display: inline-block;
        flex: 1;
        padding: 16px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .card-container .title {
        display: flex;
        align-items: center;
    }

    .ant-card-small>.ant-card-head>.ant-card-head-wrapper>.ant-card-extra {
        padding: 8px 0;
        font-size: 14px;
    }

    .ant-card-extra {
        float: right;
        margin-left: auto;
        padding: 16px 0;
        color: #000000d9;
        font-weight: 400;
        font-size: 14px;
    }

    a, area, button, [role=button], input:not([type="range"]), label, select, summary, textarea {
        touch-action: manipulation;
    }
    a {
        color: #1890ff;
        text-decoration: none;
        background-color: transparent;
        outline: none;
        cursor: pointer;
        transition: color .3s;
        -webkit-text-decoration-skip: objects;
    }
    .ant-card-small>.ant-card-body {
        padding: 12px;
    }

    .ant-card-body {
        padding: 24px;
    }
    .ant-card-body:before {
        display: table;
        content: "";
    }
    .ant-spin-nested-loading, .ant-spin-container {
        width: 100%;
        height: 100%;
    }
    .ant-spin-nested-loading {
        position: relative;
    }

    .ant-spin-nested-loading, .ant-spin-container {
        width: 100%;
        height: 100%;
    }
    .ant-spin-container {
        position: relative;
        transition: opacity .3s;
    }
    .content-wrapper {
        overflow-y: hidden;
        overflow-x: hidden;
    }
    ol, ul, dl {
        margin-top: 0;
        margin-bottom: 1em;
    }
    ul li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
    }
    ul li .content {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        margin-right: 5px;
    }
    .read a {
        color: #666;
    }
    a, area, button, [role=button], input:not([type="range"]), label, select, summary, textarea {
        touch-action: manipulation;
    }

    .ant-badge-status {
        line-height: inherit;
        vertical-align: baseline;
    }
    .ant-badge {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: #000000d9;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum";
        position: relative;
        display: inline-block;
        line-height: 1;
    }

    .ant-badge-status-error {
        background-color: #ff4d4f;
    }
    .ant-badge-status-dot {
        position: relative;
        top: -1px;
        display: inline-block;
        width: 6px;
        height: 6px;
        vertical-align: middle;
        border-radius: 50%;
    }
    .ant-badge-status-text {
        margin-left: 8px;
        color: #000000d9;
        font-size: 14px;
    }
    ul li .time {
        flex-shrink: 0;
        color: #666;
        min-width: 75px;
    }
    ul li :hover {
        color: #1890ff;
    }
</style>
</body>

